<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${basePath}/css/scrollbar.css">
    <script src="${basePath}/js/jquery-1.10.2.js"></script>
    <style type="text/css">
	    p{
		  word-wrap: break-word;
		  word-break: break-all;
		  overflow: hidden;
		}
    </style>
    <script type="text/javascript">
    	$(function(){
    		$("li", parent.document).eq(0).attr("class","active");
    		$("li", parent.document).eq(0).siblings().removeAttr("class","active");
    	});
    	function getSysTime(){
    		var time = new Date();
    		var hh = time.getHours();
    		var mi = time.getMinutes();
    		var ss = time.getSeconds();
    		return (hh<10?"0"+hh:hh)+":"+(mi<10?"0"+mi:mi)+":"+(ss<10?"0"+ss:ss);
    	}
    	function sendmessage(){
    		if($("#message").val() == "" || $("#message").val() == null){
    			return;
    		}
    		$.ajax({
				type:"post",
				url:"${basePath}/sendmessage",
				dataType:"json",
				data:new FormData($("#sendmessage")[0]),
				processData:false,
				contentType:false,
				cache:false,
				success:function(data){
					var jsonObject = data;
					if(jsonObject.result){
						//消息发送成功
						
						//每次发送和接收消息，点击展开的条数加1
						var countStr = $("#count").val();
						var countInt = parseInt(countStr) + 1;
						$("#count").val(countInt);
						
						//如果超过100条，则刷新到30条，100加上value="${count+5}"的5为105
						if(countInt > 105){
							$("#count").val("30");
							$('#moremessage').submit();
						}
						
						var message = $("#message").val();
						$("ul").append('<li class="list-group-item"><h4 class="list-group-item-heading">'
								+getSysTime()+'</h4><p class="list-group-item-text">'+message+'</p></li>');
						$("#message").val("");
					} else {
						iosOverlay({text: "消息发送失败",duration: 1e3,icon: "${basePath}/alert/cross.png"});
					}
					location.href="#b";
				}
			});
    	}
    	function getmessage(){
    		$.ajax({
				type:"post",
				url:"${basePath}/getmessage",
				dataType:"json",
				data:new FormData($("#sendmessage")[0]),
				processData:false,
				contentType:false,
				cache:false,
				success:function(data){
					
					if(data != null){
						//消息获取成功
						
						//每次发送和接收消息，点击展开的条数加1
						var countStr = $("#count").val();
						var countInt = parseInt(countStr) + 1;
						$("#count").val(countInt);
						
						var jsonArr = data;
						for(var i=0;i<jsonArr.length;i++){
							$("ul").append('<li class="list-group-item list-group-item-success"><span class="badge" style="max-width: 50%;text-overflow:ellipsis;overflow: hidden;">'
									+jsonArr[i].friendNickname+'</span>'
									+'<h4 class="list-group-item-heading">'+getSysTime()+'</h4>'
									+'<p class="list-group-item-text">'+jsonArr[i].message+'</p></li>');
						}
					} else {
						iosOverlay({text: "消息获取失败",duration: 1e3,icon: "${basePath}/alert/cross.png"});
					}
					location.href="#b";
				}
			});
    	}
    	function onEnterDown(){ 
    		if(window.event.keyCode == 13){ 
    			sendmessage(); 
    		} 
    	} 
    </script>
  </head>
  <body onkeydown='onEnterDown();' name="ssnchat">
  	<form action="${basePath}/ssnchat/${friendid}" method="post" id="moremessage">
  	<!-- count+5的5为展开更多追加的条数，countInt > 105的5也同理 -->
  		<input type="hidden" name="count" value="${count+5}" id="count">
  	</form>
  	<div style="width:85%;margin: 0px auto;">
			<ul class="list-group" style="width: 100%;margin: 20px auto 10px auto;min-height: 380px">
			  <li class="list-group-item list-group-item-info">
			  	<p class="list-group-item-text" style="text-align: center;cursor: pointer;" onclick="$('#moremessage').submit();" >展开更多</p>
			  </li>
			  <c:forEach items="${messageList }" var="message">
				  <c:if test="${message.userid==user.id }">
					  <li class="list-group-item list-group-item-success">
						  <span class="badge" style="max-width: 50%;text-overflow:ellipsis;overflow: hidden;">${message.friendNickname }</span>
						  <h4 class="list-group-item-heading">${message.timeFormat }</h4>
						  <p class="list-group-item-text">${message.message }</p>
					  </li>
				  </c:if>
				  <c:if test="${message.userid!=user.id }">
					  <li class="list-group-item">
						  <h4 class="list-group-item-heading">${message.timeFormat }</h4>
						  <p class="list-group-item-text">${message.message }</p>
					  </li>
				  </c:if>
			  </c:forEach>
			</ul>
		<form id="sendmessage">
			 <input type="hidden" value="${friendid}" name="userid" id="userid">
	      	 <input type="hidden" value="${user.id}" name="friendid" id="friendid">
	   		 <div class="input-group input-group-lg" style="width: 100%;margin: 10px auto 20px auto;">
			      <input type="text" class="form-control" name="message" id="message">
			      <div class="input-group-btn">
			      <a name="b"></a>
			        <button type="button" class="btn btn-success dropdown-toggle" onclick="sendmessage()">发送</button>
			      </div>
	   		 </div>
	    </form>
	</div>
    <script src="${basePath}/js/jquery.min.js"></script>
    <script src="${basePath}/js/bootstrap.min.js"></script>
  </body>
</html>